<template>
    <div id="replay">
        <el-container>
            <el-main>
                <video
                    class="video-item"
                    id="replayvideo"
                    controls
                    autoplay
                    muted
                    :poster="require('@/assets/video-background.jpg')"
                ></video>
            </el-main>
            <el-aside width="20%">
                <replay-control @setVideoUrl="setVideoUrl"></replay-control>
            </el-aside>
        </el-container>
    </div>
</template>

<script>
import ReplayControl from "../components/replay/ReplayControl";
import flvjs from "flv.js";

export default {
    components: {
        ReplayControl,
    },
    data() {
        return {
            flvPlayer: null,
        };
    },
    methods: {
        setVideoUrl(url) {
            this.createFlvPlayer(url);
        },
        // 将Flv播放器绑定都videoElement元素上去，播放videoUrl
        createFlvPlayer(videourl) {
            console.log("开始播放视频：" + videourl);
            this.pausemix();
            if (videourl != null && videourl != "" && flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    hasVideo: true,
                    hasAudio: false,
                    enableWorker: true,
                    cors: true,
                    url: videourl,
                });
                const videoPlayerElement = document.getElementById(
                    "replayvideo"
                );
                this.flvPlayer.attachMediaElement(videoPlayerElement);
                this.flvPlayer.load();
                this.flvPlayer.play();
            }
        },
        // 停止混流播放并移除直播流抓取
        pausemix() {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause();
                this.flvPlayer.unload();
                this.flvPlayer.detachMediaElement();
                this.flvPlayer.destroy();
                this.flvPlayer = null;
            }
        },
        getParams() {
            var cameraName = this.$route.query.cameraName;
            var startTime = this.$route.query.startTime;
            var endTime = this.$route.query.endTime;
            if(cameraName != null && startTime != null && endTime != null) {
                // this.replay(cameraName, startTime, endTime);
                this.getReplayUrl(cameraName, startTime, endTime);
            }
        },
        // replay(cameraName, startTime, endTime) {
        //     var videoUrl = this.getReplayUrl(cameraName, startTime, endTime);
        //     console.log("VideoUrl = " + videoUrl);
        //     this.setVideoUrl(videoUrl);
            
        // },
        getReplayUrl(cameraName, startTime, endTime) {
            this.$axios
                .get(
                    "/api/video/replay?cameraName=" +
                        cameraName +
                        "&startTime=" +
                        startTime +
                        "&endTime=" +
                        endTime
                )
                .then((response) => {
                    if (response.data.success == true) {
                        //查找成功
                        if (response.data.o != null) {
                            //找到录像
                            console.log("录像播放地址：" + response.data.o);
                            this.createFlvPlayer(response.data.o);
                            // return response.data.o;
                        } else {
                            //未找到录像
                            this.$message({
                                message: response.data.message,
                                type: "warning",
                            });
                        }
                    } else {
                        //查找失败
                        this.requestError(response.data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                    this.requestError("ERROR：请求异常，请稍后重试！");
                });
        },
    },
    mounted() {},
    created() {
        this.getParams();
    },
    beforeDestroy() {
        this.pausemix();
    },
};
</script>

<style scoped>
.el-main {
    padding: 0 5px;
}
.video-item {
    width: 99%;
    height: 665px;
    object-fit: contain;
    background: black;
    border: 2px solid #606266;
}
</style>